// 封装一个代替getElementById（）的方法
function byId(id){
	return typeof(id)==="string"?document.getElementById(id):id;
}
// console.log(document.getElementById("main"));
// 全局变量
var index=0;
timer=null;
var pics=byId("banner").getElementsByTagName("div");
len=pics.length;
var dots=byId("dots").getElementsByTagName("span");
var prev=byId("prev");
var next=byId("next");
// console.log(dots)

function slideImg(){
	var main=byId("main");
	// console.log(main);
	// 滑过清除定时器，离开继续
	main.onmouseover=function(){
		// 滑过清除定时器
		if(timer) clearInterval(timer);
	} 
	main.onmouseout=function(){
       timer=setInterval(function(){
            index++;
            // console.log(index)
            if(index>=len){
            	index=0;
            }
            changImg();
       },2000);
	}
	//自动在main上触发事件
	main.onmouseout();

	// 圆点点击事件，实现轮播
	for(var j=0;j<len;j++){
		// 给所有的span添加一个id的属性，值为j，作为当前的索引
		dots[j].id=j;
		dots[j].onclick=function(){
			// 改变index为当前span的id值
            index=this.id;
            // 调用函数
            changImg();
		}
	}
    // 上一张、下一张事件
    next.onclick=function(){
    	index++;
    	if(index>=len) index=0;
    	changImg();
    }

    prev.onclick=function(){
    	index--;
    	if(index<0) index=len-1;
    	changImg();
    }
}

// 切换图片
function changImg(){
	// 遍历banner下的所有div和dots下所有的span,将其隐藏
	for(var i=0;i<len;i++){
		pics[i].style.display="none";
		dots[i].className="";
	}
	// 根据index索引找到当前的div，将其显示出来
    pics[index].style.display="block";
    dots[index].className="active";
}

slideImg();